<template>
  <div class="container">
    <div>
      <div>分站</div>
      <div>正常:{{ FenZhanZhengChang }}</div>
      <div>异常:{{ FenZhanYiChang }}</div>
    </div>

    <div>
      <div>应变传感器</div>
      <div>正常:{{ YingBianZhengChang }}</div>
      <div>异常:{{ YingBianYiChang }}</div>
    </div>

    <div v-if="false">
      <div>光栅温度</div>
      <div>正常:{{ GuangShanZhengChang }}</div>
      <div>异常:{{ GuanShanYiChang }}</div>
    </div>

    <div v-if="false">
      <div>顶板离层传感器</div>
      <div>正常:{{ DingBanZhengChang }}</div>
      <div>异常:{{ DingBanYiChang }}</div>
    </div>


    <div>
      <div>位移传感器</div>
      <div>正常:{{ DingDiBanZhengChang }}</div>
      <div>异常:{{ DingDiBanYiChang }}</div>
    </div>
  </div>
</template>
<script>
import { BlsSheBeiJiBenXinXi } from '../../https/api/user'
export default {
  name: '',
  data() {
    return {
      FenZhanZhengChang: '',
      FenZhanYiChang: '',
      YingBianZhengChang: '',
      YingBianYiChang: '',
      GuangShanZhengChang: '',
      GuanShanYiChang: '',
      DingBanZhengChang: '',
      DingBanYiChang: '',
      DingDiBanZhengChang: '',
      DingDiBanYiChang: '',
      time: null
    }
  },
  mounted() {
    this.SheBeiJiBenXinXi();
    this.time = setInterval(() => {
      this.SheBeiJiBenXinXi()

    }, 1000);
  },
  methods: {
    async SheBeiJiBenXinXi() {
      const res = await BlsSheBeiJiBenXinXi()
      console.log(res, 'box2巴拉素设备基本信息');
      if (res && res.length > 0) {
        this.FenZhanZhengChang = res[0].Subs[0].zc
        this.FenZhanYiChang = res[0].Subs[0].yc

        this.YingBianZhengChang = res[0].ChuanGanQis[0].zc
        this.YingBianYiChang = res[0].ChuanGanQis[0].yc


        this.GuangShanZhengChang = res[0].WenDus[0].zc
        this.GuanShanYiChang = res[0].WenDus[0].yc


        this.DingBanZhengChang = res[0].DBLCs[0].zc
        this.DingBanYiChang = res[0].DBLCs[0].yc

        this.DingDiBanZhengChang = res[0].DDBWYs[0].zc
        this.DingDiBanYiChang = res[0].DDBWYs[0].yc
      }
    }
  },
  beforeDestroy() {　　// 离开当前路由前的操作
    clearInterval(this.time)

  }
}
</script>
<style lang="less" scoped>
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.container {
  width: 100%;
  height: 100%;
  padding: 5px;
  overflow: auto;

  >div {
    width: 100%;
    height: 23%;
    background-image: url('../../assets/BaLaSu/shouye/分站.png');
    background-repeat: no-repeat;
    background-size: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: center;
    padding: 0 10px;
    margin: 10px 0;

    >div:nth-child(1) {
      width: 32%;
      color: white;

    }

    >div:nth-child(2) {
      width: 32%;
      // height: 50px;
      color: rgb(87, 230, 220);
      background-image: url('../../assets/BaLaSu/shouye/正常.png');
      background-repeat: no-repeat;
      background-size: 100% 100%;
      padding: 5px 0;
    }

    >div:nth-child(3) {
      width: 32%;
      color: rgb(247, 222, 3);
      background-image: url('../../assets/BaLaSu/shouye/正常.png');
      background-repeat: no-repeat;
      background-size: 100% 100%;
      padding: 5px 0;

    }
  }
}
</style>
